<template>
  <header class="layout-header text-white bg-white">
    <div class="header-contain">
      <router-link to="/" class="header-logo logo1"><img :src="logo" alt=""></router-link>
      <router-link to="/" class="header-logo logo2"><img :src="wapLogo" alt=""></router-link>
      <div class="zb-nav" :class="[navshow ? 'navshow' : 'navhide']">
        <div @click="tomy(item.path)" :class="[item.selected === activeMenu || item.home === activeMenu ? 'on' : '', item.show == 2 ? 'wap' : '']" class="nava" v-for="item in sidebars">
          <div class="">
            <icon :name="item.icon" size="20"/>
            <div class="name">{{item.name}}</div>
          </div>
          
        </div>
      </div>
      <div class="flex-1"></div>
      
      <User />
    </div>
  </header>
</template>
<script lang="ts" setup>
  import User from './user.vue'
  import { useAppStore } from '@/stores/app'
  import { linkToPath } from '@/utils/weChat'
  import { rgbToHsl } from '@/utils/util.ts';
  import { computed, onMounted, ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  const route = useRoute();
  const router = useRouter();
  const appStore = useAppStore();
  
  const NAVBAR = [
    {
        name: '应用',
        path: '/',
        component: 'product',
        selected:'/product',
        home:'/', // 首页选中的菜单 --- 这个只有path === '/'才需要
        show:1, // 1-手机PC都显示， 2-只有手机显示， 0-手机PC都不显示
        icon:'local-icon-nav-home',
        ftshow:1, // 手机端底部是否显示 1-显示，0-隐藏
        meta:{title:'应用中心'}
    },{
        name: '对话',
        path: '/talk',
        component: 'talk',
        selected:'/talk',
        show:1,
        icon:'local-icon-nav-talk',
        ftshow:1, // 手机端底部是否显示 1-显示，0-隐藏
        meta:{title:'对话'}
    },{
        name: '我的',
        path: '/my',
        component: 'my',
        selected:'/my',
        show:2,
        icon:'local-icon-nav-my',
        ftshow:1, // 手机端底部是否显示 1-显示，0-隐藏
        meta:{title:'个人中心'}
    },
    
    {
        name: '某个应用',
        path: '/product/list',
        component: 'product/list',
        selected:'/',
        show:0,
        icon:'Avatar',
        ftshow:0, // 手机端底部是否显示 1-显示，0-隐藏
        meta:{title:'应用中心'}
    }
  ]
  const activeMenu = computed<string>(() => '/'+route.path.split('/')[1]);
  
  const sidebars = computed(() => {
    return NAVBAR.filter(n => n.show != 0)
  })
  const navshow = computed(() => {
    const a = NAVBAR.filter(n => n.show != 0).filter(item => item.ftshow === 1 && (item.path === activeMenu.value || item.home === activeMenu.value) );
    return a.length > 0 ? true : false
  })
  
  const tomy = (path:string) => {
    if( linkToPath(path) && path){
      router.push(path);
    }
  }



  
  function updateViewportHeight() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }

  function setColor(){
    const hslData = rgbToHsl(themecolor.value)
    const yanse = Number(hslData[0]);
    const baohedu = hslData[1] ? Number(hslData[1]) : 100;
    const sediao = hslData[2] ? Number(hslData[2]) : 50;
    const sediaoAdd3 = sediao+10 > 65 ? 65 : sediao+10;
    const sediaoAdd5 = sediao+18 > 70 ? 70 : sediao+18;
    const sediaoAdd7 = 78;
    const sediaoAdd8 = 84;
    const sediaoAdd9 = 98;
    document.documentElement.style.setProperty('--el-color-primary', `hsl(${yanse}, ${baohedu}%, ${sediao}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-3', `hsl(${yanse}, ${baohedu}%, ${sediaoAdd3}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-5', `hsl(${yanse}, ${baohedu}%, ${sediaoAdd5}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-7', `hsl(${yanse+10}, ${baohedu - 10}%, ${sediaoAdd7}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-8', `hsl(${yanse+15}, ${baohedu - 15}%,  ${sediaoAdd8}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-9', `hsl(${yanse+20}, ${baohedu}%, ${sediaoAdd9}%)`);
    document.documentElement.style.setProperty('--el-color-primary-dark-2', `hsl(${yanse}, ${baohedu}%, ${sediao}%)`);
  }
  const logo = ref('')
  const wapLogo = ref('');
  const themecolor = ref()
  appStore.getConfig( (res:any) => {
    console.log('res----', res)
    logo.value = res.logo1;
    wapLogo.value = res.logo2;
    themecolor.value = res.themecolor || '#154193';
    setColor();

    document.title = res.sitename;
    const linkElement = document.querySelector("link[rel*='icon']");
    if (linkElement) {
      (linkElement as HTMLLinkElement).href = res.icon;
    }
  }); // 调用 getConfig 方法
  onMounted(()=>{
    // 初始化
    updateViewportHeight();
    // 监听窗口大小变化
    window.addEventListener('resize', updateViewportHeight);
    window.addEventListener('orientationchange', updateViewportHeight);
  })


</script>

<style lang="scss" scoped>
  .wap-icon{
    display: block; margin: 0 auto 2px; color:#000;
    :deep(svg){margin: 0 auto;}
  }
  .wap-icon-on{
    display: block; margin: 0 auto 4px;
    :deep(svg){margin: 0 auto;}
  }
  .nava.on{
    .name{color:var(--el-color-primary);}
    .wap-icon-on{
      display: block;  color:var(--el-color-primary);
      :deep(svg){margin: 0 auto;}
    }
    :deep(.local-icon){
      svg{color: var(--el-color-primary) !important;}
    }
  }
  .nava{
    cursor: pointer;
    :deep(.local-icon){
      svg{color: #ccc !important;}
    }
  }
  $headerW:var(--headerW);
  .header-logo {
    display: flex; align-items: center; justify-content: center; margin: 10px auto; 
    width: var(--navaW); height: var(--navaW);
    img {
      display: block;
      max-width: 70%;
      max-height: 70%; border-radius: 12px; overflow: hidden;
    }
    &.logo2{display: none;}
  }
  $hvH: calc(var(--vh, 1vh) * 100);
  @media only screen and (min-width: 770px) {
    .layout-header {
      height: $hvH; width: $headerW; min-width: $headerW; z-index: 1999; box-shadow: 0px 1.32px 5.3px  rgba(0, 0, 0, 0.1); position: fixed; z-index:var(--zindex);
      .header-contain { margin: 0 auto;height: 100%; width: 100%; padding: 1px;}
      .nava {
        font-size: 13px; color: #7F7F7F; position: relative;width: var(--navaW); height: var(--navaW); margin: 0 auto; display: flex; text-align: center; border-radius: 12px; margin-bottom: 18px; align-items: center; justify-content: center; padding-top: 2px;
        .wap-icon-on{color: #ccc;}
        &.on {
          background-color: var(--el-color-primary-light-9); color: var(--el-color-primary);
          .wap-icon-on{color: var(--el-color-primary);}
        }
        &.wap{display: none;}
        
      }
    }
  }
  @media only screen and (max-width: 769px){
    .layout-header{
      height: var(--header-height);
      border-bottom: 1px solid var(--el-border-color-extra-light);
      position: fixed;z-index:var(--zindex);
      top: 0;
      width: 100%;
      .header-contain {
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0 auto;
        padding: 0 16px;
      }
    }
    .header-logo {
      display: block;
      min-width: 300px; height: auto;
      img { display: block; max-width: 100%; max-height: 40px; }
      &.logo2{display: flex;}
      &.logo1{display: none;}
    }
    .zb-nav{
      z-index:var(--zindex2);
      background-color: var(--aside-bg-color);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      position: fixed; width: 100%; bottom: 0; left: 0;  display: flex; align-items: center; justify-content: space-between;color: #7F7F7F;
      .nava{
        padding-top: 0.16rem; color: #999; font-size: 0.2rem; width:30%; text-align:center; height: var(--wapFtH);
        :deep(svg){
          width: 0.46rem !important; height: 0.46rem !important;
        }
      }
    }
    
  }
  
</style>